<template>
  <div :class="styles['out-store']">
    <el-tabs
        v-model="currentTab"
        type="card"
        @tab-click="handleClick"
    >
      <el-tab-pane v-for="(pane, index) in tabPaneList" :key="pane.name" :name="index">
        <template #label>
          <el-badge :value="pane.badge" :max="99" :show-zero="false">
            <span>{{ pane.label }} &nbsp;</span>
          </el-badge>
        </template>
      </el-tab-pane>
      <component :is="tabPaneList[currentTab].component"/>
    </el-tabs>
  </div>
</template>

<script setup name="OutStore">
import {computed, onMounted, ref} from 'vue'
import AwaitPick from './AwaitPick'
import AwaitSend from './AwaitSend'
import AllSend from './AllSend'
import {getOrderAmountApi} from '@/service/outStore'

// 订单数枚举
const orderCount = ref({})
// tab选项卡
const tabPaneList = computed(() => {
  const {pickCount, sendCount} = orderCount.value
  return [
    {
      label: '待拣货订单',
      badge: pickCount,
      name: 'AwaitPick',
      component: AwaitPick
    },
    {
      label: '待发货订单',
      badge: sendCount,
      name: 'AwaitSend',
      component: AwaitSend
    },
    {
      label: '全部已发货订单',
      badge: 0,
      name: 'AllSend',
      component: AllSend
    }
  ]
})
// 当前tab
const currentTab = ref(0)
// tab切换
function handleClick (pane, ev) {
  // console.log('tab切换', pane, ev)
}

// 获取订单数据
async function getOrderCount () {
  const res = await getOrderAmountApi()
  if (res.code === __code) {
    orderCount.value = res.data
  }
}

onMounted(() => {
  getOrderCount()
})

</script>

<style lang="less" src="./index.less" module="styles">
</style>
